<template>
    <el-container>
        <el-header height="34px" style="padding: 0">
            <div style="background-color: #f9f9f9; width: 1200px;margin: 0 auto; position: relative;line-height: 0px; ">

            </div>
        </el-header>

        <div class="logo_line">
            <div class="step_bar">
                <div class="shopping_procedure">
                    <ul class="Steps">
                        <li class="">我的购物车</li>
                        <li class="active">填写订单</li>
                        <li class="">完成订单</li>
                    </ul>
                </div>
                <div class="logo">
                    <a href="http://localhost:8500/about">
                        <img src="img.png" alt=""
                             class="shoppingCar_img">
                    </a>
                </div>
            </div>
        </div>


        <div class="checkout_tip" style="">
            <span class="icon_tip">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.VHyQaYfW8W47jsmnEf-3GAHaHa?w=207&h=206&c=7&r=0&o=5&dpr=1.3&pid=1.7"
                     alt="">
            </span>
            <b>温馨提示：</b>
            <div class="con">
                <p style="height:10px">平台及销售商不会以任何理由，要求您点击任何网址链接进行退款或支付操作。</p>
            </div>
        </div>

        <div class="address" style="display: block">
            <h1 class="title" style="width: 960px">收货人信息</h1>
            <div class="addr_list" style="margin-left:1%;margin-right:1%;font-size: 12px">
                <el-row>
                    <el-col v-for="(item,index) in address" :span="6" :key="index" @click.native="cardHandle(item,index)">
                        <div style="margin-top:15px">
                            <!--<el-radio v-model="radio" label="1">备选项</el-radio>-->
                            <el-card :body-style="{ padding: '0px'}" shadow="hover"
                                     style="border-color:  #FF6666;
                                     width: 200px;height: 100px;
                                     background-color: #ffecec;
                                     cursor: pointer;"

                            >
                                <div class="address_list">
                                    <br>
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}</span>
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.phone}}</span><br><br><br><br><br>
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;地址:{{item.detailed}}</span>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div style="margin: 20px 10px">
                <el-button type="info" plain><a href="http://localhost:8500/information/AddressAdd">添加收货地址＋</a>
                </el-button>
            </div>
        </div>
        <h1 class="title" style="width: 960px;margin: 0 auto">送货清单</h1>
        <div class="aaa">
            <div style="margin-left: -400px;margin-top: 10px">
            <el-table class="buyCar_bar"
                      :data="list"
                      ref="gg"
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
                <el-table-column prop="name" label="商品信息" width="200"></el-table-column>
                <el-table-column prop="url" label="" width="102">
                    <template slot-scope="scope">
                        <el-popover
                                placement="right-end"
                                width="200"
                                trigger="hover"
                        >
                            <img :src="scope.row.url" style="width: 100%" alt="">
                            <img :src="scope.row.url" style="width: 100%;cursor: pointer;" alt="" slot="reference">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="gmoney" label="商品单价" width="90"></el-table-column>
                <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
            </el-table>
            <div v-for="(arr,index) in list"  v-show="isActive == index">总价:<span style="color: orangered">￥{{ arr.money }}</span>
                <el-button type="primary" plain style="float: right" @click="payCount()">去支付</el-button>
                <el-button type="warning" plain style="float: right;margin-right: 10px;" @click="openDeleteConfirm()">取消支付</el-button>
            </div>
        </div>
        </div>

        <div class="footer">
            <div class="footer_box">
                <div class="footer_copyright">
                    <span>Copyright (C) 书笺小驿 2022.10.1-2022.12.1, All Rights Reserved</span>
                </div>
            </div>
        </div>

    </el-container>


</template>

<script>
    export default {
        data() {
            return {
                list: [{oid:''}],
                address: {},
                isActive: 0,

            }
        },
        methods: {
            loadList() {
               /* let url = 'http://localhost:8080/order' + this.user.id;
                this.axios.get(url).then((response) => {
                    let responseBody = response.data;
                    this.list = responseBody.data;
                })*/
            },
            addressList() {
                let url = 'http://localhost:8080/address/list/';
                this.axios.get(url).then((response) => {
                    let responseBody = response.data;
                    this.address = responseBody.data;
                })
            },
            cardHandle(item,index){
                console.log(index)
                console.log(item)
            },
            payCount(){
                //let state = this.list[0].state;
                let state = this.list[0].oid;
                console.log(state);
                let url = 'http://localhost:8080/order/changeState/' + state;
                console.log('url = ' + url);
                this.axios
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    }
                    if (responseBody.state == 20000 || responseBody.state == 40400) {
                        this.commentCount();
                        location.href="/finishOrder";
                    }
                });
            },
            openDeleteConfirm() {
                console.log(this.list[0].oid);
                let oid = this.list[0].oid;
                let message = '此操作将删除该订单,是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.payCancel(oid);
                }).catch(() => {
                });
            },

            payCancel(oid){
                let url = 'http://localhost:8080/order/deleteo/' + oid;
                console.log('url = ' + url);
                this.axios
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    }
                    if (responseBody.state == 20000 || responseBody.state == 40400) {
                        this.commentCount();
                    }
                });
            },
            commentCount() {
                let url = "http://localhost:8080/order/getUserLogin";
                this.axios.get(url).then((response) => {
                    if (response.data.data == null) {
                        location.href = "/userlogin";
                        return;
                    }
                    let responseBody = response.data;
                    this.user = responseBody.data;
                    let uId = this.user.id;
                    console.log("用户信息" + this.user.id);
                    let url = 'http://localhost:8080/order/orderlist/' + this.user.id;
                    this.axios.get(url).then((response) => {
                        let responseBody = response.data;
                        this.list = responseBody.data;
                    })
                })
            }
        },
        mounted() {
            this.loadList();
            this.addressList();
            this.commentCount();
        }
    }
</script>

<style scoped>
    @import '../style/Order.css';
</style>